<!-- 商家端 -->
<template>
    <div>
        <app-head :nickname-value="userInfo.nickname" :avatarValue="userInfo.avatar"></app-head>
        <app-body>
            <div v-show="!eidtAddress">

                <div class="user-info-container">
                    <div class="author">商家中心</div> 
                </div>
                
                <br>
                <div >
                    <!-- <div >卖家等级：5级</div>  -->
                    <div class="user-info-details-text-money">卖家等级:{{ userInfo.level }}</div>
                </div>
                <br>

                <div class="idle-container">
                    <!-- 当用户点击一个选项卡时，activeName 的值会自动更新为被点击的选项卡的名字。 -->
                    <!-- 当 activeName 的值改变时，当前激活的选项卡会自动更新为 activeName 对应的选项卡。 -->
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="我发布的" name="1"></el-tab-pane>
                        <el-tab-pane label="我下架的" name="2"></el-tab-pane>
                        <el-tab-pane label="我卖出的" name="4"></el-tab-pane>
                    </el-tabs>
                    
                    <div class="idle-container-list">
                        <!-- 遍历dataList,每一项数据被赋值给 item，索引被赋值给 index -->
                        <div v-for="(item, index) in dataList[activeName - 1]" :key="index" class="idle-container-list-item">
                            <div class="idle-container-list-item-detile" @click="toDetails(activeName, item)">
                                <!-- 展示商品图片 -->
                                <el-image style="width: 115px; height: 115px;" :src="$store.state.baseApi + item.imgUrl"
                                    fit="cover">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline">无图</i>
                                    </div>
                                </el-image>
                                <!-- 展示文字 -->
                                <div class="idle-container-list-item-text">
                                    <!-- 商品名字 -->
                                    <div class="idle-container-list-title">
                                        {{ item.idleName }}
                                    </div>
                                    <!-- 商品详细描述 -->
                                    <div class="idle-container-list-idle-details">
                                        {{ item.idleDetails }}
                                    </div>
                                    <!-- 对商品操作时间 -->
                                    <div class="idle-container-list-idle-time">{{ item.timeStr }}</div>
                                    <!-- 价钱\状态和操作按钮 -->
                                    <div class="idle-item-foot">
                                        <!-- 价钱和状态 -->
                                        <div class="idle-prive">￥{{ item.idlePrice }}
                                            <!--activeName 只有我卖出的,我买到的,显示购买状态orderStatus,否在显示空字符串-->
                                            {{ (activeName === '4') ? orderStatus[item.orderStatus] : '' }}
                                        </div>
                                        <!-- 按钮  4"我卖出的" 不显示按钮 -->
                                        <el-button v-if="activeName !== '4'" type="danger"  slot="reference" plain
                                            @click.stop="handle(activeName, item, index)">{{ handleName[activeName - 1] }}
                                        </el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </app-body>
        <app-foot></app-foot>
    </div>
</template>

<script>
import AppHead from '../common/AppHeader.vue';
import AppBody from '../common/AppPageBody.vue'
import AppFoot from '../common/AppFoot.vue'

export default {
    name: "me",//这个页面的名字，不影响路由
    components: {
        AppHead,
        AppBody,
        AppFoot
    },
    data() {//初始数据定义
        return {
            activeName: '1',
            handleName: [' 下架', ' 删除', ' 撤出购物车', '', ''],//五个选项卡对应的操作按钮 数组
            dataList: [//五个选项卡对应的数据 数组
                [],//dataList[0]我发布的
                [],//dataList[1]我下架的
                [],//dataList[2]我买到的
                [],//dataList[3]我卖出的
                [],//dataList[4]我收藏的
                [],
                [],
                [],
                [],
                [],
            ],
            orderStatus: ['待付款', '待发货', '待收货', '已完成', '已取消'],//订单状态 数组
            userInfo: {//用户信息
                accountNumber: "",
                avatar: "",
                nickname: "",
                signInTime: "",
            },
        };
    },
    created() {//八大生命周期钩子之一，页面加载时自动调用,用于数据获取、处理
        if (!this.$globalData.userInfo.nickname) {//不存在则请求用户信息
            this.$api.getUserInfo().then(res => {//获取用户信息
                if (res.status_code === 1) {
                    res.data.signInTime = res.data.signInTime.substring(0, 10);
                    console.log(res.data);
                    this.$globalData.userInfo = res.data;
                    this.userInfo = this.$globalData.userInfo;
                }
            })
        } else {//存在用户信息则直接赋值
            this.userInfo = this.$globalData.userInfo;
            console.log(this.userInfo);
        }
        this.getIdleItemData();
        this.getMySoldIdle();
    },
    methods: {
        getMySoldIdle() {//获取我卖出的商品数据,添加到dataList[3]  我卖出的  数组
            this.$api.getMySoldIdle().then(res => {
                if (res.status_code === 1) {
                    console.log('getMySoldIdle', res.data);//后端返回的data数据
                    for (let i = 0; i < res.data.length; i++) {
                        let pictureList = JSON.parse(res.data[i].idleItem.pictureList);//解析图片列表
                        this.dataList[3].push({//dataList[3]  加入数组  我卖出的
                            id: res.data[i].id,
                            imgUrl: pictureList.length > 0 ? pictureList[0] : '',
                            idleName: res.data[i].idleItem.idleName,
                            idleDetails: res.data[i].idleItem.idleDetails,
                            timeStr: res.data[i].createTime.substring(0, 10) + " " + res.data[i].createTime.substring(11, 19),
                            idlePrice: res.data[i].orderPrice,
                            orderStatus: res.data[i].orderStatus
                        });
                    }
                }
            })
        },
        getIdleItemData() {//获取我发布的和我下架的商品数据,添加到dataList[0]和dataList[1]数组
            this.$api.getAllIdleItem().then(res => {//获得所有商品数据
                console.log(res);
                if (res.status_code === 1) {
                    for (let i = 0; i < res.data.length; i++) {
                        res.data[i].timeStr = res.data[i].releaseTime.substring(0, 10) + " " + res.data[i].releaseTime.substring(11, 19);//发布时间
                        let pictureList = JSON.parse(res.data[i].pictureList);//JSON格式转换为JavaScript对象或数组
                        res.data[i].imgUrl = pictureList.length > 0 ? pictureList[0] : '';//商品图片
                        if (res.data[i].idleStatus === 1) {//1--代表我发布的
                            this.dataList[0].push(res.data[i]);//dataList[0]我发布的
                        } else if (res.data[i].idleStatus === 2) {//2--代表我下架的
                            this.dataList[1].push(res.data[i]);//dataList[1]我发布的
                        }
                    }
                }
            })
        },
        handleClick(tab, event) {
            console.log(this.activeName);//打印激活选项卡的name
        },
        toDetails(activeName, item) {
            if (activeName === '4' ) {//我卖出的-->订单详情
                this.$router.push({ path: '/order', query: { id: item.id } });
            } else {//我发布的和我下架的-->商品详情
                this.$router.push({ path: '/details', query: { id: item.id } });
            }
        },
        //按钮操作
        //我发布的--下架  我下架的--删除  
        //商品数据库的idle_status:0删除  1上架在卖  2下架
        handle(activeName, item, index) {//根据 activeName 的值来更新闲置物品的状态
            console.log(activeName, item, index);
            this.$confirm('是否确认？', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                if (activeName === '1') {//我发布的--按钮是：下架
                    this.$api.updateIdleItem({
                        id: item.id,
                        idleStatus: 2
                    }).then(res => {
                        console.log(res);
                        if (res.status_code === 1) {
                            //splice(index, 1) 就表示从索引 index 开始删除一个元素。
                            this.dataList[0].splice(index, 1); //删除数组中的元素
                            item.idleStatus = 2;//更新商品状态2  2是下架
                            this.dataList[1].unshift(item);//添加到我下架的数组
                        } else {
                            this.$message.error(res.msg)
                        }
                    });
                } else if (activeName === '2') {//我下架的--按钮对应是：删除
                    this.$api.updateIdleItem({//更新商品状态
                        id: item.id,
                        idleStatus: 0
                    }).then(res => {
                        console.log(res);
                        if (res.status_code === 1) {
                            item.idleStatus=0;
                            this.dataList[1].splice(index, 1);//删除数组中的元素
                        } else {
                            this.$message.error(res.msg)
                        }
                    });
                } 
            }).catch(() => {
            });
        },
    }
}
</script>

<style scoped>
.author {
        color: #000000;
        font-size: 36px; /* 修改字体大小 */
        align-items: center; /* 文字居中 */
        transform: translateX(450px);
    }
.user-info-container {
    width: 100%;
    height: 100px;
    border-bottom: 15px solid #f6f6f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.user-info-details {
    display: flex;
    height: 140px;
    align-items: center;
    margin: 20px 40px;
}

.user-info-details-text {
    margin-left: 20px;
}

.idle-container {
    margin: 0 auto; /* 设置左右外边距为auto可以使元素水平居中 */
    padding: 0 20px;
}


.idle-container-list {
    min-height: 55vh;
}

.idle-container-list-item {
    border-bottom: 1px solid #eeeeee;
    cursor: pointer;
}

.idle-container-list-item:last-child {
    border-bottom: none;
}

.idle-container-list-item-detile {
    height: 120px;
    display: flex;
    align-items: center;
}

.idle-container-list-item-text {
    margin-left: 10px;
    height: 120px;
    max-width: 800px;
}

.idle-container-list-title {
    font-weight: 600;
    font-size: 18px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.idle-container-list-idle-details {
    font-size: 14px;
    color: #555555;
    padding-top: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.idle-container-list-idle-time {
    font-size: 13px;
    padding-top: 5px;
}

.idle-prive {
    font-size: 15px;
    padding-top: 5px;
    color: red;
}

.idle-item-foot {
    width: 800px;
    display: flex;
    justify-content: space-between;
}
</style>